<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>坐标系统</title>
        <style>
        html{
          height: 100%;
          width: 100%;  
          margin: 0;
          padding: 0;  
        }
        body{
          margin: 0;
          padding: 0;
          height: 100%;
          width: 100%;
          overflow: auto;
        }    
        #app {
            display: block; 
            /* position: relative;  static,relative 刚好占满时会出现滚动条 */
            position: absolute; /* 内容刚好占满时不会出现滚动条 */
            border: none;
            height: 100%;
            width: 100%;
            margin: 0px;
            padding: 0px;
            left:0;
            top:0;
            overflow: auto;
        }                
        .at-outer {
            border: none;
            display: block;
            height: 100%;
            width: 100%;
        }
        .bar-head{
            border: solid 1px silver;
            display: flex;
            height: 32px;
            width: 99%;
        }
        .btn-head{
            height: 28px;
            margin: 2px;
        }
        .bodyctx {
            border: solid 1px black;
            position: relative; /* 让内部的元素在 "position: absolute;"时定位以本容器为基准 */
            height: calc(100% - 36px); /* .bar-head的height=32,.bar-head,.bodyctx的border占 2*2*1px */
            width: calc(100% - 2px); /* .bodyctx本身的border占 2*1px */
            overflow: auto; /* 默认为 auto */
        }         
               
        .cs-atouter {
            border: solid 15px green;
            display: block; /* 决定内容布局方式 */
            /* position: relative;  static,relative 刚好占满时会出现滚动条 */
            position: absolute; /* 决定本身定位方式，absolute：内容刚好占满时不会出现滚动条 */
            margin: 20px;
            padding: 30px;
            left:0;
            top:0;
            right:0;
            bottom:0;
            height: calc(100% - 110px); /* 只要边框外沿能全显示，就不会有滚动条 */
            width: calc(100% - 110px);
        }
        .cs-bodyctx {
            border: solid 5px blue;
            height: calc(90% - 10px); /* .bodyctx本身的border占 2*5px */
            width: calc(50% - 10px);  
            position: relative; /* relative是在父文档流中以相对位置定位 */
            overflow: auto;
        }
        .cs-imgbox{
            border: solid 1px silver; 
        }
        .cs-innerbox{
            background-color: aqua;
            border: solid 2px darkblue;
            height: 90%;
            width: 99%;
            position: absolute; /* absolute是相对于父元素按绝对位置定位, left,top,height,width,right,bottom有效 */
            left: 41px;
            top: 48px;
            right: 26px; /* 有宽度则此属性无效 */
            bottom: 12px; /* 有高度则此属性无效 */
            margin: 11px;
            padding: 18px;
            overflow: auto;
        }
        .cs-inincatch{
            background-color: silver;
            border: solid 17px green;
            position: relative; /* relative是在父文档流中以相对位置定位, Scrool区包含父的padding */
            height: 90%;
            width: 90%;
            margin: 13px;
            padding: 25px;
        }

        .cs-info{
            border: solid 2px yellowgreen;
            position: absolute; 
            height: 48%;
            width: 400px;
            top: 12px;
            right: 20px; /* 有宽度则此属性无效 */
            
        }
        .cs-line{
            height: 32px;
            width: 99%;
        }
               
        </style>
        <script>
            var screen_availHeight = 0;
            var screen_availWidth = 0;
            const mcinfo = {};
            const mvinfo = {};
            
            const checkInfo = ()=>{
                let scrH = screen.availHeight;
                let scrW = screen.availWidth;
                console.log('screen.availHeight:',scrH);
                console.log('screen.availWidth:',scrW);
                screen_availHeight=scrH;
                screen_availWidth =scrW;
            };
            
            const domouseclick = (e)=>{
                console.log('mouseclick,e.srcElement:',e.srcElement.className);
                mcinfo.offsetX = e.offsetX;
                mcinfo.offsetY = e.offsetY;
                mcinfo.clientX = e.clientX;
                mcinfo.clientY = e.clientY;
                mcinfo.pageX = e.pageX;
                mcinfo.pageY = e.pageY;
                mcinfo.screenX = e.screenX;
                mcinfo.screenY = e.screenY;
                console.log('mouseclick,mcinfo:',mcinfo);
                showinfo();
            };

            function domousemove(e){
                mvinfo.offsetX = e.offsetX;
                mvinfo.offsetY = e.offsetY;
                mvinfo.clientX = e.clientX;
                mvinfo.clientY = e.clientY;
                mvinfo.pageX = e.pageX;
                mvinfo.pageY = e.pageY;
                mvinfo.screenX = e.screenX;
                mvinfo.screenY = e.screenY;
                showinfo();
            }
            
            const showinfo=()=>{
               var cs_info = document.getElementById("cs_info");
               var iHtml = `
                            screen::availHeight:`+screen_availHeight+` , availWidth:`+screen_availWidth+`<br>
                            mouseMove:<br>
                            偏移offset X/Y：`+mvinfo.offsetX+`, `+mvinfo.offsetY+`<br>
                            视口client X/Y：`+mvinfo.clientX+`, `+mvinfo.clientY+`<br>
                            页面page X/Y：`+mvinfo.pageX+`, `+mvinfo.pageY+`<br>
                            屏幕screen X/Y：`+mvinfo.screenX+`, `+mvinfo.screenY+` <br>    
                            mouseClick:<br>
                            偏移offset X/Y：`+mcinfo.offsetX+`, `+mcinfo.offsetY+`<br>
                            视口client X/Y：`+mcinfo.clientX+`, `+mcinfo.clientY+`<br>
                            页面page X/Y：`+mcinfo.pageX+`, `+mcinfo.pageY+`<br>
                            屏幕screen X/Y：`+mcinfo.screenX+`, `+mcinfo.screenY+` <br>    
                        `;
                //console.log(iHtml);  
                cs_info.innerHTML = iHtml;
            };
            
            window.onload=()=>{ // //document
                console.log('document.onload');
                checkInfo();
                showinfo();
            };
            
        </script>
    </head>
    <body>
    <div id="app">
      <div class="at-outer">
          <div class="bar-head">
              <button class="btn-head" >按钮1</button>
              <button class="btn-head" >按钮2</button>
          </div> 
          <div class="bodyctx" >
              
              <div class="cs-atouter" onclick="domouseclick(event)" onmousemove="domousemove(event)">
                  cs-atouter: margin: 20px; padding: 30px; border: solid 15px green;
                  <div class="cs-bodyctx">
                      cs-bodyctx: border: solid 5px blue; position: relative; overflow: auto;<br>
                      cs-innerbox: position: absolute; left: 41px; top: 48px; overflow: auto; padding: 18px;
                      <div class="cs-innerbox">
                        
                        <div class="cs-inincatch">
                            
                        </div>  
                      </div>   
                  </div>    
                    <div class="cs-info" onclick="checkInfo">
                        <div class="cs-line" id="cs_info">
                        </div>   
                    </div>          
              </div>  
         
          </div>      
      </div> 
    </div>
    </body>
</html>